<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代理模式</title>
</head>

<body>
    <img src="https://tse1-mm.cn.bing.net/th/id/R-C.ff5b20454be33e8b10d9bcf371f2d809?rik=%2bvXQdMWOYzv1Uw&riu=http%3a%2f%2fimages.shejidaren.com%2fwp-content%2fuploads%2f2015%2f11%2floading-gif-9.gif&ehk=esabIPgHd5tCMEZhmuvgEJhzHqWEMljYZstP9nIZyYQ%3d&risl=&pid=ImgRaw&r=0"
        origin_src="https://tse1-mm.cn.bing.net/th/id/OIP-C.NhG1WHLCv6ixi3LC243ovwHaNK?pid=ImgDet&rs=1" />
    <script>
        // 图片加载会损耗性能
        // 使用一个loading.gif占位 请求一次就会缓存 下次不再需要加载这个展位图片
        // 让页面先显示出来 
        window.onload = function() {
            const oImg = document.querySelector('img');
            const origin_src = document.getAttribute('origin_src');
            const temImg = document.createElement('img');
            // 网络进程，DOM 不去阻塞页面的第一次展示
            temImg.onload = function() {
                temImg.src = origin_src;
            }
            temImg.src = origin_src;
            document.body.appendChild(temImg);
        }
    </script>
</body>

</html>